<script setup name="ScoreOverviewFinishDetail">
import { ref, onMounted } from 'vue';
import { useRouter } from 'vue-router';
import { ElTable, ElTableColumn } from 'element-plus';
import service from '@/utils/request';

const router = useRouter();
const routerQuery = router.currentRoute.value.query;
const tableData = ref([]);
const loading = ref(false);

// 格式化表格数据
const formatTableData = (data) => {
  if (!data) return [];
  
  return [
    {
      workId: data.baseWorkId + "base",
      name: routerQuery.name,
      jobId: routerQuery.jobId,
      taskName: data.baseWorkName,
      taskStatus: data.baseWorkState,
      score: routerQuery.baseWorkScore,
      operation: '详情',
    },
    {
      workId: data.academicWorkId + "outstanding",
      name: routerQuery.name,
      jobId: routerQuery.jobId,
      taskName: data.academicWorkName,
      taskStatus: data.academicWorkState,
      score: routerQuery.outstandingWorkScore,
      operation: '详情',
    }
  ];
};

// 获取表格数据
const fetchTableData = async () => {
  try {
    loading.value = true;
    const res = await service({
      url: "/superadmin/score/exam",
      method: "post",
      headers: {
        Authorization: 'Bearer ' + localStorage.getItem('token'),
      },
      params: {
        examId: routerQuery.examId,
        jobId: routerQuery.jobId
      }
    });
    tableData.value = formatTableData(res.data.data||[]);
  } catch (error) {
    //console.error('获取数据失败:', error);
    tableData.value = [];
  } finally {
    loading.value = false;
  }
};

// 点击详情操作
const handleDetailClick = (row, column) => {
  if (column.property !== 'operation') return;
  
  const queryParams = { ...row, ...routerQuery };
  
  // 根据工作ID判断是基础工作还是突出工作
  if (row.workId.endsWith("base")) {
    router.push({
      path: '/superAdministrator/baseWork/finish/detail',
      query: queryParams
    });
  } else if (row.workId.endsWith("outstanding")) {
    router.push({
      path: '/superAdministrator/outstandingWork/finish/detail',
      query: queryParams
    });
  }
};

// 返回列表页面
const goBack = () => {
  router.push({
    path: '/superAdministrator/scoreOverview/finish',
    query: {
      state: "已结束",
    }
  });
};

// 组件挂载时获取数据
onMounted(() => {
  fetchTableData();
});
</script>

<template>
  <div class="scoreOverviewFinishDetail">
    <!-- 导航路径 -->
    <div class="breadcrumb">
      <span class="breadcrumb-item" @click="goBack">已结束-考核情况列表</span>
      <span class="breadcrumb-separator">/</span>
      <span class="breadcrumb-current">导师情况</span>
    </div>
    
    <!-- 主要内容 -->
    <div class="layout">
      <!-- 导师信息卡片 -->
      <div class="info-card">
        <div class="card-header">{{ routerQuery.taskName }}</div>
        <div class="card-content">
          <div class="info-item">
            <span class="item-label">导师姓名</span>
            <span class="item-value">{{ routerQuery.name }}</span>
          </div>
          <div class="info-item">
            <span class="item-label">工号</span>
            <span class="item-value">{{ routerQuery.jobId }}</span>
          </div>
          <div class="info-item">
            <span class="item-label">任务名称</span>
            <span class="item-value">{{ routerQuery.taskName }}</span>
          </div>
          <div class="info-item">
            <span class="item-label">考核结果</span>
            <span class="item-value">{{ routerQuery.examResult }}</span>
          </div>
          <div class="info-item">
            <span class="item-label">考核分数</span>
            <span class="item-value">{{ routerQuery.sumScore }}</span>
          </div>
        </div>
      </div>
      
      <!-- 工作情况表格 -->
      <div class="table-section">
        <div class="section-header">
          <h3>本科学业导师考核情况</h3>
        </div>
        
        <div class="table-container" v-loading="loading" element-loading-text="加载中...">
          <el-table
            :data="tableData"
            :style="{width: '100%'}"
            height="calc(100vh - 400px)"
            show-overflow-tooltip
            empty-text="暂无数据"
            :header-cell-style="{color: '#000', background: '#f2f3f5'}"
            @cell-click="handleDetailClick"
          >
            <el-table-column align="left" prop="name" label="姓名" width="100"></el-table-column>
            <el-table-column align="center" prop="jobId" label="工号" width="100"></el-table-column>
            <el-table-column align="center" prop="taskName" label="任务名称"></el-table-column>
            <el-table-column align="center" prop="taskStatus" label="任务状态" width="120">
              <template #default="scope">
                <span :class="`task-status-${scope.row.taskStatus}`">{{ scope.row.taskStatus }}</span>
              </template>
            </el-table-column>
            <el-table-column align="center" prop="score" label="考核分数" width="100"></el-table-column>
            <el-table-column align="center" prop="operation" label="操作" width="80">
              <template #default="scope">
                <span class="operation-link">{{ scope.row.operation }}</span>
              </template>
            </el-table-column>
          </el-table>
        </div>
      </div>
    </div>
  </div>
</template>

<style scoped lang="scss">
@use "sass:color";

// 颜色变量
$primary-color: #4c6fb4;
$danger-color: #eb5757;
$success-color: #4bc65f;
$warning-color: #ff9800;
$info-color: #697ac7;
$gray-color: #909399;
$bg-light: #f1f2f3;
$bg-lighter: #f2f3f5;
$border-color: #e4e7ed;
$text-primary: #000000;
$text-secondary: #86909c;
$text-tertiary: #8e96a0;

.scoreOverviewFinishDetail {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  background-color: #f7f8fa;
  
  // 导航路径样式
  .breadcrumb {
    height: 50px;
    padding: 0 20px;
    display: flex;
    align-items: center;
    gap: 10px;
    color: $text-secondary;
    background-color: white;
    border-bottom: 1px solid $border-color;
    
    .breadcrumb-item {
      cursor: pointer;
      transition: all 0.3s ease;
      
      &:hover {
        color: $primary-color;
        font-weight: 600;
        transform: translateY(-1px);
      }
    }
    
    .breadcrumb-separator {
      color: $text-tertiary;
    }
    
    .breadcrumb-current {
      color: $text-primary;
      font-weight: 500;
    }
  }
  
  // 主要内容布局
  .layout {
    flex: 1;
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 20px;
    overflow-y: auto;
  }
  
  // 信息卡片样式
  .info-card {
    background-color: white;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    padding: 20px;
    transition: all 0.3s ease;
    
    &:hover {
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
    }
    
    .card-header {
      font-size: 18px;
      font-weight: 600;
      color: $text-primary;
      margin-bottom: 15px;
      padding-bottom: 10px;
      border-bottom: 1px solid $border-color;
    }
    
    .card-content {
      display: flex;
      flex-wrap: wrap;
      gap: 20px;
      
      .info-item {
        display: flex;
        align-items: center;
        min-width: 250px;
        gap: 15px;
        
        .item-label {
          color: $text-secondary;
          font-weight: 500;
          min-width: 80px;
        }
        
        .item-value {
          color: $text-primary;
          font-weight: 600;
        }
      }
    }
  }
  
  // 表格区域样式
  .table-section {
    background-color: white;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    overflow: hidden;
    transition: all 0.3s ease;
    
    &:hover {
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
    }
    
    .section-header {
      padding: 15px 20px;
      border-bottom: 1px solid $border-color;
      
      h3 {
        margin: 0;
        font-size: 16px;
        font-weight: 600;
        color: $text-primary;
      }
    }
    
    .table-container {
      padding: 20px;
      
      // 任务状态样式
      .task-status-未提交 {
        color: $gray-color;
        font-weight: 600;
      }
      
      .task-status-审核通过 {
        color: $success-color;
        font-weight: 600;
      }
      
      .task-status-未审核 {
        color: $danger-color;
        font-weight: 600;
      }
      
      .task-status-进行中 {
        color: $warning-color;
        font-weight: 600;
      }
      
      // 操作链接样式
      .operation-link {
        color: $primary-color;
        cursor: pointer;
        transition: all 0.3s ease;
        display: inline-block;
        
        &:hover {
          color: color.adjust($primary-color, $lightness: -10%);
          transform: scale(1.05);
          text-decoration: underline;
        }
      }
    }
  }
}

// 响应式设计
@media (max-width: 768px) {
  .scoreOverviewFinishDetail {
    .breadcrumb {
      padding: 0 10px;
      font-size: 14px;
    }
    
    .layout {
      padding: 10px;
    }
    
    .info-card {
      padding: 15px;
      
      .card-content {
        .info-item {
          min-width: 100%;
          justify-content: space-between;
        }
      }
    }
    
    .table-section {
      .table-container {
        padding: 10px;
      }
    }
  }
}
</style>